<template>
  <el-form
    v-show="!showResult"
    label-width="auto"
    ref="articleFormCpt"
    :model="articleForm"
    :rules="articleFormRules"
    @submit.prevent="handleSubmit"
  >
    <el-form-item label="Title" prop="title">
      <el-input v-model="articleForm.title"></el-input>
    </el-form-item>
    <el-form-item label="Category" prop="cid">
      <el-select v-model="articleForm.cid" :disabled="isLoadingCategoryList">
        <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.title"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Author" prop="author">
      <el-input v-model="articleForm.author"></el-input>
    </el-form-item>
    <el-form-item label="Summary" prop="synopsis">
      <el-input v-model="articleForm.synopsis"></el-input>
    </el-form-item>
    <el-form-item label="Image" prop="image_input">
      <ImageManager v-model="articleForm.image_input" />
    </el-form-item>
    <el-form-item label="Content" prop="content">
      <div id="article-content"></div>
    </el-form-item>
    <el-form-item label="Banner">
      <el-switch v-model="articleForm.is_banner" :active-value="1" :inactive-value="0"></el-switch>
    </el-form-item>
    <el-form-item label="Hot">
      <el-switch v-model="articleForm.is_hot" :active-value="1" :inactive-value="0"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">Submit</el-button>
    </el-form-item>
  </el-form>

  <el-result
    v-if="showResult"
    icon="success"
    :title="$route.query.id ? 'Edit Succeeded' : 'Insert Succeeded'"
  >
    <template #extra>
      <el-button @click="$router.push('/article/list')">Browse the Article List</el-button>
      <el-button
        type="primary"
        @click="$router.push('/article/insert').then(() => $router.go(0))"
      >Proceed to Insert</el-button>
    </template>
  </el-result>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import ImageManager from '@/components/image-manager/index.vue'
import E from 'wangeditor'
import {
  handleGetCategoryList,
  isLoadingCategoryList,
  categoryList,
} from '@/pages/article/category/index'
import { getArticleInfo, submitArticle } from '@/api/article'
import { useRoute } from 'vue-router'

// 1. get category list
handleGetCategoryList({ type: 1 })


const articleForm = ref<ArticleInfoType>({
  id: 0,
  title: '',
  author: '',
  cid: null,
  synopsis: '',
  image_input: '',
  content: '',
  is_banner: 1,
  is_hot: 1,
  url: '',
  visit: 0,
})

const articleFormRules = ref({
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  cid: [{ required: true, message: '请选择分类', trigger: 'blur' }],
})

// 商品详情
let editor: E

onMounted(() => {
  editor = new E('#article-content')
  editor.create()
  editor.txt.html(articleForm.value.content)
})

const articleFormCpt = ref(null)
const showResult = ref(false)

const route = useRoute()

watch(
  () => route.query.id,
  (val) => {
    if (val) {
      getArticleInfo(+val).then(({ info }) => {
        articleForm.value = {
          id: +val,
          title: info.title,

          author: info.author,
          cid: info.cid,
          synopsis: info.synopsis,
          image_input: info.image_input[0],
          content: info.content,
          is_banner: info.is_banner,
          is_hot: info.is_hot,
          url: info.url,
          visit: info.visit,
        }
        editor.txt.html(info.content)
      })
    }
  },
  {
    immediate: true
  }
)

function handleSubmit() {
  const des = editor.txt.html()

  des && (articleForm.value.content = des)

  const form = articleFormCpt.value as any

  form.validate((valid: boolean) => {
    if (valid) {
      submitArticle(articleForm.value).then(() => {
        showResult.value = true
      })
    }
  })
}
</script>
